<template>
	<!-- 售后申请页面 -->
	<view class="content">
		<view class="list_ul">
			<view class="list_li">
				<view class="list_li_left">
					处理方式
				</view>
				<view class="list_li_right">
				   <picker @change="bindPickerChange" :value="index" :range="fangshi" class="pick">
				                        <view class="uni-input">{{fangshi[index]}}</view>
				                    </picker>
				</view>
				<image src="../../static/rightimg.png" class="se" mode="widthFix"></image>
			</view>
			<view class="list_li">
				<view class="list_li_left">
					退款原因
				</view>
				<view class="list_li_right">
				   <picker @change="bindPickerChange2" :value="indexx" :range="yuanyin" class="pick">
				                        <view class="uni-input">{{yuanyin[indexx]}}</view>
				                    </picker>
				</view>
				<image src="../../static/rightimg.png" class="se" mode="widthFix"></image>
			</view>
			<view class="list_li">
				<view class="list_li_left">
					退款说明
				</view>
				<view class="list_li_right">
				  <input type="text" placeholder="选填,请填写你退/换货说明" class="_input"/>
				</view>
			</view>
			<view class="list_li">
				<view class="list_li_left">
					退款金额
				</view>
				<view class="list_li_right">
				 ¥13.90
				</view>
			</view>
			<view class="list_li">
				<view class="list_li_left">
					上传凭证
				</view>
				<view class="list_li_right">
					<!-- 图片上传组件 url=服务器上传地址-->
				 <upimg url="https://www.baidu.com"></upimg>
				</view>
			</view>
		</view>
		
		<view class="ks" style="margin-top:30rpx;">
			*提示:您可退款的最大金额为￥12.80
		</view>
		<view class="ks">
			*提示:请提供收货面单+收到数量/需售后数量+原因（如：收到10个苹果/坏了3个+面单图片+坏果图片）
		</view>
		<view class="bt">
			<view class="bt_sm bt_sm_o" @tap="submit">提交申请</view>
			<view class="bt_sm" @tap="back">取消</view>
		</view>
		<!-- 侧边栏 -->
		<fixce></fixce> 
		<!-- 回到顶部start -->
		<view class="top" :style="{'display':(topState===true? 'block':'none')}">
		<image src="../../static/huitop.png" class="huitop"
		@tap="top()">
		</view>
		</image>
			<!-- 回到顶部end-->
	</view>
</template>

<script>
	import fixce from '../../component/fixce.vue';  //侧边栏组件
	import upimg from '../../component/sunui-upimg.vue';  //上传图片
	export default{
		components:{
		fixce,
		upimg
		},
		data(){
			return{
				topState:false,
				 fangshi: ['退货退款'],
				 index: 0, //fangshi
				 indexx:0,  //yuanyin
				 yuanyin:['不想要了','卖家缺货','拍错了/订单信息错误','其它'],
			}
		},
		// 回到顶部start
		onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
		    if(e.scrollTop>200){ //当距离大于200时显示回到顶部按钮
		        this.topState = true
		    }else{ //当距离小于200时关闭回到顶部按钮
		        this.topState = false
		    }
		},
		// 回到顶部end
		methods:{
			   bindPickerChange: function(e) {
			            console.log('picker发送选择改变，携带值为', e.target.value)
			            this.index = e.target.value
			        },
					bindPickerChange2: function(e) {
					         console.log('picker发送选择改变，携带值为', e.target.value)
					         this.indexx = e.target.value
					     },
			top() { //回到顶部
			　　　　uni.pageScrollTo({ 
			　　　　　　scrollTop: 0, duration: 300 
			　　　　}); 
			　　},
			back (){
				uni.navigateBack({
					delta:1
				})
			},
			submit (){  //体较申请
			uni.showToast({
				title:'已提交'
			})
			setTimeout(()=>{
				uni.switchTab({
					url:'../member/member'
				})
			},1500);
			
			}
		}
	}
</script>

<style>
	.content{
		width:100%;
		height:100vh;
		background: #f3f3f3;
	}
	.list_ul{
		background-color: #fff;
	}
	.list_li{
		width:90%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		padding:25rpx 0;
		margin:0 auto;
		border-bottom:2rpx solid #ededed;
	}
	.list_li_left{
		width:22%;
		font-size:28rpx;
		color:#999;
	}
	.list_li_right{
		width:78%;
		display: flex;
		align-items: center;
		font-size:28rpx;
	}
	.pick{
		width:100%;
		font-size:28rpx;
	}
	._input{
		width:100%;
		font-size:28rpx;
	}
	.se{
		width:35rpx;
		position: absolute;
		right:0;
	}
	.ks{
			width:90%;
			margin:5rpx auto;
		  color: #ff80c0;
	}
	.bt{
		width:100%;
		height:100rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		background-color: #fff;
		position: fixed;
		bottom:0;
	}
	.bt_sm{
			width:140rpx;
			padding:10rpx 0;
			border-radius:100rpx;
		    border:2rpx solid #666;
		    color: #666;
			text-align: center;
			margin-right:25rpx;
	}
	.bt_sm_o{
		border:2rpx solid #ff80c0;
		color: #ff80c0;
	}
	.kms{
		width:90rpx;
		height:90rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color:#000;
		font-size:50rpx;
		background-color: #e3e3e3;
	}
	
	
	
</style>

